<template>
  <view style="margin: 20px;padding-bottom: 30px">
    <div ref="demo"></div>
    <button type="primary" @click="verifyYzm" style="margin-top: 20px">验证</button>
    <view v-if="token" class="card-layout ver-layout" style="background: #072bf5">
      <view class="title-view">客户端验证码生成的-token信息</view>
      <view>{{ token }}</view>
    </view>
    <view class="card-layout ver-layout">
      <view class="title-view">流程记录：</view>
      <view v-for="(item,index) in logList" :key="index">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
import {loadScript} from "../../utils/utils"

export default {
  name: "dingxiang",
  data() {
    return {
      loadFinish: false,
      logList: [],
      token: ''
    }
  },
  onLoad() {
    if (typeof _dx == 'undefined')
      loadScript("https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js",)
          .then(res => {
            this.loadFinish = true
            console.log("loadScript=success", res)
          })
          .catch(err => {
            console.error("loadScript=error", err)
          })
  },
  methods: {
    verifyYzm() {
      this.logList.length = 0
      let _this = this
      if (!this.loadFinish) uni.showToast({title: "js文件加载失败！"})
      _dx.Captcha(this.$refs.demo, {
        appId: "7ddea44a004f2d36723ef1d5a45d8998",
        apiServer: 'https://vip6.dingxiang-inc.com',
        success: token => {
          console.log("token======", token);
          this.token = token
          _this.logList.push("1. 前端人工校验成功！")
          _this.requestProcess(token)
        }
      });
    },
    requestProcess(token) {
      uni.showLoading({title: '加载中',})
      uniCloud.callFunction({
        name: 'captcha-power',
        data: {
          action: 'dxVerify',
          token: token
        },
        success: res => {
          console.log("requestProcess==========", res)
          this.logList.push("2. 请求业务后台接口开始")
          this.logList.push("2.0 请求腾讯云验证码服务返回的结果：", JSON.stringify(res.result))
          this.logList.push("2.1 业务后台请求顶象服务校验通过！")
          this.logList.push("2.2 业务后台请求完成！")
          uni.hideLoading()
        },
        fail: err => {
          console.error("requestProcess------", err)
          uni.hideLoading()
        }
      })
    }
  }
}
</script>

<style scoped>
.card-layout {
  margin: 10px;
  width: revert;
  background: #70c0ba;
  border-radius: 10px;
  color: white;
  padding: 10px 20px;
}

.title-view {
  width: revert;
  text-align: center;
  color: red;
}

.card-layout > * {
  color: red;
  margin-bottom: 10px;
  word-wrap: break-word;
}

.ver-layout {
  display: flex;
  flex-direction: column;
}
</style>
